<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>move</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
    <div id="app" class="container">
        <div class="top">
            <div class="left">
                <div class="title">
                    <p>列表1</p>
                </div>
                <div class="con">
                    <ul>
                        <li v-for="(mes,index) in message">
                            <input type="checkbox" :id=`checkbox${mes.id}` name="checkbox" :checked="mes.select" @click="mes.select=!mes.select" />
                            {{mes.name}}
                        </li>
                    </ul>
                </div>
            </div>
            <div class="button">
                <div class="buttonper">
                    <p><button @click='push'> >> </button></p>
                    <p><button @click='del'> << </button></p>
                </div>
                <div class="buttonper">
                    <p><button @click='show'> ok </button></p>
                </div>
            </div>
            <div class="right">
                <div class="title">
                    <p>列表2</p>
                </div>

                <div class="con">
                    <ul>
                        <li v-for="mes1 in message1">
                            <input type="checkbox" :id=`checkbox${mes1.id}` name="checkbox" :checked="mes1.select" @click="mes1.select=!mes1.select" />
                            {{mes1.name}}
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="bottom">
            <div class="bottominner">
                {{message2}}
            </div>
        </div>
    </div>
    <script>

        var app = new Vue({
            el: '#app',
            data: {
                message: '2',
                message1: '3',
                message2: ''
            },
            methods: {
                getData() {
                    var that = this;
                    //加载，获取左边
                    fetch("http://localhost:5247/api/GetIDECodeList/smartide", {
                        //method:'Get',
                        mode: 'cors'
                    })
                        .then(response => response.json())
                        .then(function (response) {
                            that.message = response;
                        })
                },
                //获取右边
                getDatar() {
                    var that = this;
                    fetch("http://localhost:5247/api/GetRight", { mode: 'cors' })
                        .then(response => response.json())
                        .then(function (response) {
                            that.message1 = response;
                        })
                },
                push() {
                    let that = this;
                    let message = JSON.parse(JSON.stringify(that.message));
                    message.forEach((item, index) => {
                        if (item.select) {
                            var formData = item;
                            //左边删除数据
                            fetch("http://localhost:5247/api/MoveTo/", {
                                method: 'POST',
                                body: item.name
                            })
                                .then(response => response.json())
                                .then(function (response) {
                                    that.$set(that.message, response);
                                    //that.message = response;
                                }),
                                //右边增加数据
                                fetch("http://localhost:5247/api/GetRight", {
                                    method: 'GET',
                                    mode: 'cors'
                                })
                                    .then(response => response.json())
                                    .then(function (response) {
                                        //that.message1 = response;
                                        that.$set(that.message1, response);
                                    })
                        }
                    })
                },

                del() {
                    let that = this;
                    let message1 = JSON.parse(JSON.stringify(that.message1));
                    message1.forEach((item, index) => {
                        if (item.select) {
                            var formData = item;
                            //右边删除数据
                            fetch("http://localhost:5247/api/MoveBack/", {
                                method: 'POST',
                                body: item.name
                            })
                                .then(response => response.json())
                                .then(function (response) {
                                    //that.message1 = response;
                                    that.$set(that.message1, response);
                                }),
                                //左边增加数据
                                fetch("http://localhost:5247/api/GetLeft", {
                                    method: 'GET',
                                    mode: 'cors',
                                    body: item
                                })
                                    .then(response => response.json())
                                    .then(function (response) {
                                        //that.message = response;
                                        that.$set(that.message, response);
                                    })
                        }
                    })
                },

                show() {
                    var that = this;
                    fetch("http://localhost:5247/api/GetDetalis", {
                        method: 'POST',
                        mode: 'cors',
                        body: formData                    
                    })
                        .then(response => response.json())
                        .then(function (response) {
                            //that.message2 = response;
                            that.$set(that.message2, response);
                        })
                },

            },
            created() {
                this.getData();
                this.getDatar();
            }
        })
    </script>

</body>
</html>